<template>
  <section class="wrapper">
    <el-col :span="24" class="action-bar">
      <el-select v-model="column" placeholder="请选择">
          <el-option-group
          v-for="group in columnOptions"
          :key="group.label"
          :label="group.label">
          <el-option
              v-for="item in group.options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
          </el-option-group>
      </el-select>
      <el-input v-model="searchTit" class="action-bar-input" placeholder="请输入标题" style="margin:0 20px"></el-input>
      <el-button type="primary" size="medium" @click="handSumit">检索</el-button>
      <el-button type="primary" size="medium" @click="unSumit">重置</el-button>
      <el-button type="primary" size="medium" @click="toAdd">添加</el-button>
    </el-col>

    <!--列表-->
    <el-table :data="tableList" highlight-current-row class="el-table-style">
      <el-table-column type="index" width="75" sortable></el-table-column>
      <el-table-column prop="column_name" label="所属栏目" width="110" sortable></el-table-column>
      <el-table-column prop="title" label="标题" width="100" sortable></el-table-column>
      <el-table-column prop="start_time" label="视频" min-width="200" sortable>
        <template slot-scope="scope">
          <video controls="controls" width="200" height="150" :src="scope.row.video_url"></video>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="视频简介" min-width="160" sortable></el-table-column>
      <el-table-column prop="created_at" label="创建时间" min-width="250" sortable></el-table-column>
      <el-table-column prop="sort" label="排序" min-width="120" sortable></el-table-column>
<!--      <el-table-column prop="signupNum" label="来源" min-width="120" sortable></el-table-column>-->
      <el-table-column label="操作" width="700">
        <template slot-scope="scope">
          <el-button type="primary" class="danger-btn" size="mini" @click="toContentVideoDetail(scope.row.id)">编辑</el-button>
          <el-button type="danger" class="danger-btn" size="mini" @click="delContentVideo(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pagesize"
          @current-change="pageChange"
        ></el-pagination>
      </div>
    </el-col>
  </section>
</template>
<script>
export default {
  name: "machine",
  data() {
    return {
      tableList:[],//表格数据
      columnOptions: [],
        column: '',
        searchTit:'',
        addFormVisible:false,
        total:0,
        page:1,
        pagesize:16
    };
  },
  mounted(){
    this.getContentVideoList();
    this.getclassifyList();
  },
  methods: {
    unSumit(){
      this.column = "";
      this.searchTit = "";
      this.getContentArticleList()
    },
    //获取栏目列表
    async getclassifyList(){
      let params = {
        type: 'video'
      }
      const res = await this.$api.classifyList(params)
      if (res.data.level == 'success'){
        this.columnOptions = res.data.data;
      } else {
        this.$message({
          message : res.data.message,
          type : 'warning'
        })
      }
    },
    //获取视频模块列表
    async getContentVideoList(){
      let params = {
        page: this.page,
        limit: this.pagesize,
        keyword: this.searchTit,
        classify_id: this.colunm,
        type: 'video'
      }
      const res = await this.$api.getContentVideoList(params)
      if (res.data.level == 'success'){
        this.tableList = res.data.data;
      }else {
        this.$message({
          message : res.data.message,
          type : 'warning'
        })
      }
    },
    //删除视频模块
    async delContentVideo(id){
      let params = {
        id : id
      }
      const res = await this.$api.delContentVideo(params);
      if (res.data.level == 'success'){
        this.$message({
          message: res.data.message,
          type: 'success'
        })
        this.getContentVideoList();
      } else {
        this.$message({
          message: res.data.message,
          type: 'warning'
        })
      }
    },
    toContentVideoDetail(id){
      this.$router.push({
        path:'/videoEditor',
        query: {
          id:id,
          columnOptions: this.columnOptions
        }
      })
    },
    toAdd(){
      this.$router.push({
        path:'/videoEditor',
        query:{
          columnOptions: this.columnOptions
        }
      })
    },
    pageChange(id){
      this.page = id;
      this.getContentVideoList();
    },
    handSumit(){
      this.getContentVideoList();
    }
  },
};
</script>
<style lang="scss" scoped>

</style>
